<template>
    <div class="w_h_100">
        <div class="forms">
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    历史担保信息
                </div>
            </div>
            <mytable :fields="hisFields" width="110" :isHight="false" :isPaginationShow="false" :defaultList="his"
                ref="tableRef" class="m_t_10" :isSelection="false">
                <template v-slot:timeLimit="{ row }">
                    <span>{{ row.timeLimit || '0' }}天</span>
                </template>
                <template v-slot:approveStatus="{ row }">
                    <div class="normal_status" v-if="row.approveStatus != 6">
                        <img src="../../assets/normal.png" alt="" class="normal_img">
                        <span>正常</span>
                    </div>
                    <div class="abnormal" v-else>
                        <img src="../../assets/abnormal.png" alt="" class="normal_img">
                        <span>超时</span>
                    </div>
                </template>
                <template v-slot:masterStatus="{ row }">
                    <div class="success_status" v-if="row.masterStatus == 0">
                        <img src="../../assets/normal.png" alt="" class="status_img">
                        <span>正常</span>
                    </div>
                    <div class="success_status" v-if="row.masterStatus == 1">
                        <img src="../../assets/normal.png" alt="" class="status_img">
                        <span>在途</span>
                    </div>
                    <div class="pause_status" v-if="row.masterStatus == 2">
                        <img src="../../assets/pause.png" alt="" class="status_img">
                        <span>暂停</span>
                    </div>
                    <div class="settle_status" v-if="row.masterStatus == 3">
                        <img src="../../assets/settle.png" alt="" class="status_img">
                        <span>结清</span>
                    </div>
                    <div class="settle_status" v-if="row.masterStatus == 4">
                        <img src="../../assets/settle.png" alt="" class="status_img">
                        <span>解保</span>
                    </div>
                    <div class="abnormal_status" v-if="row.masterStatus == 5">
                        <img src="../../assets/abnormal.png" alt="" class="status_img">
                        <span>逾期</span>
                    </div>
                    <div class="extension_status" v-if="row.masterStatus == 6">
                        <img src="../../assets/extension.png" alt="" class="status_img">
                        <span>展期</span>
                    </div>
                    <div class="noRead_status1" v-if="row.masterStatus == 7">
                        <img src="../../assets/noRead.png" alt="" class="status_img">
                        <span>预警</span>
                    </div>
                    <div class="compensation_status" v-if="row.masterStatus == 8">
                        <img src="../../assets/compensation.png" alt="" class="status_img">
                        <span>代偿</span>
                    </div>
                </template>
                <template v-slot:productName="{ row }">
                    <div class="d_f a_i_c">
                        <div class="isRead" v-if="row.isRead == 0"></div>
                        <div class="noRead" v-else></div>
                        {{ row.productName }}
                    </div>
                </template>
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="detail(row)">查看</span>
                    </div>
                </template>
            </mytable>
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    保前审批流程
                </div>
            </div>
            <mytable :fields="beforeFields" width="110" :isHight="false" :isPaginationShow="false"
                :defaultList="beforeInfo" ref="tableRef" class="m_t_10" :isSelection="false">
                <template v-slot:timeLimit="{ row }">
                    <span>{{ row.timeLimit || '0' }}天</span>
                </template>
                <template v-slot:approveStatus="{ row }">
                    <span>{{ row.approveStatus == 1 ? '正常' : '超时' }}</span>
                </template>
                <template v-slot:productName="{ row }">
                    <div class="d_f a_i_c">
                        <div class="isRead" v-if="row.isRead == 0"></div>
                        <div class="noRead" v-else></div>
                        {{ row.productName }}
                    </div>
                </template>
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="detail(row)">查看</span>
                    </div>
                </template>
            </mytable>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { businessDetail } from '../../api/service'
import { runTaskCustomer } from '../../api/agent'
import { useRoute, useRouter } from 'vue-router'
import {beforeInsuranceType} from './data'
export default defineComponent({
    name: '',
    setup() {
        const data:beforeInsuranceType = reactive({
            hisFields: [
                {
                    label: '项目编号',
                    prop: 'projectNo',
                    width: '250px',
                },
                {
                    label: '产品名称',
                    prop: 'productName',
                    width: '250px',
                },
                {
                    label: '客户名称',
                    prop: 'customerName',
                    width: '150px',
                },
                {
                    label: '经办机构',
                    prop: 'agencyName',
                    width: '250px',
                },
                {
                    label: '地区',
                    prop: 'agencyArea',
                    width: '150px',
                },
                // {
                //     label: '业务部门',
                //     prop: 'deptName',
                //     width: '150px',
                // },
                {
                    label: '进件时间',
                    prop: 'projectTime',
                    width: '200px',
                },
                {
                    label: '担保金额（元）',
                    prop: 'guaMoney',
                    width: '150px',
                },
                {
                    label: '担保起始日期',
                    prop: 'beginDate',
                    width: '150px',
                },
                {
                    label: '到期日期',
                    prop: 'expiryDate',
                    width: '150px',
                },
                {
                    label: '当前任务',
                    prop: 'nodeName',
                    width: '150px',
                },
                {
                    label: '项目状态',
                    prop: 'masterStatus',
                    width: '150px',
                },
                {
                    label: '业务状态',
                    prop: 'approveStatus',
                    width: '150px',
                },
                // {
                //     label: '期限(年)',
                //     prop: 'period',
                //     width: '250px',
                // },
                // {
                //     label: '担保费率(%)',
                //     prop: 'guaranteeRate',
                //     width: '180px',
                // },
                // {
                //     label: '应收保费(元)',
                //     prop: 'receivablePremium',
                //     width: '150px',
                // },
            ],
            beforeFields: [
                {
                    label: '任务名称',
                    prop: 'nodeName',
                    width: '250px',
                },
                {
                    label: '操作人',
                    prop: 'assigneeName',
                    width: '150px',
                },
                {
                    label: '操作时间',
                    prop: 'endTime',
                    width: '200px',
                },
                {
                    label: '流程时长',
                    prop: 'completeTime',
                    width: '200px',
                },
                {
                    label: '审批结论',
                    prop: 'approveResult',
                    width: '200px',
                },
                {
                    label: '担保金额（元）',
                    prop: 'guaMoney',
                    width: '150px',
                },
                {
                    label: '期限（月）',
                    prop: 'period',
                    width: '150px',
                },
                {
                    label: '担保费率（%）',
                    prop: 'guaranteeRate',
                    width: '150px',
                },
                {
                    label: '应收保费（元）',
                    prop: 'receivablePremium',
                    width: '150px',
                },
                {
                    label: '备注',
                    prop: 'comment',
                    width: '200px',
                },
            ],
            beforeInfo: [],
            his: [],
        })
        const route = useRoute()
        const router = useRouter()
        onMounted(() => {
            methods.getData()
        })
        const methods = {
            getData() {
                businessDetail({ id: route.query.projectId as string }).then((res: any) => {
                    res.before.his.map((item: any) => {
                        if (item.agencyArea) {
                            let area = JSON.parse(item.agencyArea)
                            area = area.sort((a, b) => b.length - a.length)
                            item.agencyArea = area[0].join('/')
                        }
                    })
                    data.his = res.before.his
                    data.beforeInfo = res.before.beforeInfo
                })
            },
            detail(item) {
                console.log(item);
                localStorage.setItem('item', JSON.stringify(item))
                router.push({ path: '/service/singleFinancing/form', query: { category: route.query.productCategory as string || route.query.category as string, } })
            }
        }
        return {
            ...toRefs(data), ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.forms {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

    padding: 1px 32px 24px 32px;
    overflow-y: auto;
}

.bottom {
    background: #fff;
    padding: 32px;
    width: calc(100% - 64px);
}
</style>